iT邦幫忙

2025 iThome 鐵人賽

DAY 24
0
Modern Web

設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!系列 第 24

24 改錯程式還有回頭路?搞懂 Git 不再迷航!

  • 分享至 

  • xImage
  •  

前言

在開發過程中,我們常會遇到開發功能告一個段落,想先記錄當前進度再處理其他專案項目的情況。又或者是想要知道「這個功能是什麼時候開發的?動了哪些檔案?」這時候,一個好用又熱門廣泛的版本控制工具 —— Git 就能派上用場啦!它可以告訴我們剛才假設的所有問題,不只能幫我們追蹤檔案歷程、還原版本,甚至能協助多人協作,一起來看看怎麼使用吧!

安裝Git

  1. 請先前往 Git 網站,依據裝置的作業系統,下載並安裝對應版本的 Git。

  2. 安裝完成後開啟 Git,會看到以下畫面。
    24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示1

建立專案 Git 環境

  1. 請先打開終端機,切換路徑到要進行版本控制的專案目錄。
cd <專案路徑>

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示2
(後面出現的黃色字樣 就是目前所在的路徑)

  1. 確認專案中是否已有 .gitignore 檔案,如果還沒有記得先補上!這份檔案是用來排除不需要進入版控的檔案與資料夾,例如 node_modules.vscode 等。

  2. 初始化 Git 版本控制環境,讓 Git 開始記錄版本變化。

git init

產生成功會在當前目錄裡建立 .git 隱藏檔
24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示3

  1. 將目前專案內的所有檔案加入索引。
git add .
  1. 接著輸入要產生commit的訊息。
git commit -m "<訊息內容>"
  1. 完成以上步驟後,這份專案就已成功建立 Git 紀錄啦!可以打開 VS Code → 原始檔控制 → View Git Graph,看到專案裡建立好的 commit 紀錄。
    24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示4

新增其他分支(branch)

在多人開發或多功能開發的情境下,我們會使用「分支(branch)」來避免大家擠在同一條線上開發,就像所有人都擠在一張考卷上寫字,一定會打架、蓋到別人的東西、擦不乾淨、很難收尾
因此,常見的做法是:用分支來區分「個人開發功能」、「正式上線版」、「測試環境版」 等等開發環境。在「個人開發功能」改完先在自己分支測試,沒問題再合併(merge)到「測試環境版」比較穩定、不會出錯。

我們這邊來分享如何新增自己的分支以及合併其他分支進度:

  1. 在專案中建立一個新分支。新增分支的時候要注意,請先確認目前所在的分支,因為新分支會從當前進度複製。
cd <專案路徑> // 如果目前已在專案路徑,這步可以不做。
git branch <分支名稱>

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示5
(多新增了 dev 分支)

下方以新增 dev 分支做舉例:

  1. 如果要切換到 dev 分支進行開發,使用:
git checkout dev
  1. dev 分支中開發與測試完成,新增 commit 後,如果要合併回主分支 master,請先切回主分支,再執行合併:
    這樣就完成了將 dev 的進度合併到 master
git checkout master
git merge dev

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示6
(切換至 master 合併了 dev 分支進度)

  1. 如果最後進度合併完,dev 分支已不再需要,可以這樣做刪除。
git branch -d dev

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示7
(刪除 dev 分支)

  1. 想查看目前專案裡有哪些分支,也可以輸入:
git branch

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示8

常見 Git 提交訊息規範

在推送分支、撰寫 commit 訊息時,可以依照這次推送的進度內容,標記屬於哪一種類型。以下整理出幾個常見的:

類型名稱 說明
feat 為專案添加新的功能
fix 修復專案 Bug
hotfix 緊急修復處理專案 Bug
docs 修改了專案的文件、註釋或任何與程式碼邏輯無關的內容
refactor 優化或重構專案程式碼
test 新增或修改測試程式
style 修改程式中縮排、分號等格式,不影響邏輯
ci 修改持續整合或持續部署的相關設定

不過最終還是要以團隊規範為主,建立一致的開發習慣,才能讓專案協作更順暢!

結語

這篇分享了如何在專案中建立 Git 版本控制環境、紀錄開發進度、以及善用分支管理來協作開發。不管是單人開發還是多人協作,Git 都是不可或缺的好夥伴,它很好使用的備份工具,是程式開發過程中的「時光機」,非常方便!

當你遇到問題、需要回溯版本,或者想知道某段程式是什麼時候加進來的,Git 都能幫你解惑。而養成良好的版本控制習慣,更會讓開發流程順暢、省力。
下一篇我們會介紹到如何將本地專案推上GitHub,敬請期待!

參考資料與延伸閱讀

Git 安裝來源
Commits 參考


上一篇
23 如何掌握網站表現?設定 Google Analytics 追蹤成效
下一篇
25 從本地到雲端:把你的專案輕鬆搬上 GitHub!
系列文
設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言